<template>
	<view>
		<!-- 用户区背景 -->
		<view class="userQuanBj">
			<!-- 内容填充 -->
			<view class="loginPading">
				<!-- 标题文本 -->
				<view class="titleTxtBlod">
					HI,欢迎你的光临
				</view>
				<!-- 提示文本 -->
				<view class="titleTxtTips margin5">
					加入我们，开启创意之旅
				</view>
				<!-- 输入框容器 -->
				<view class="kuangPading">
					<view class="quankuang">
						<!-- 手机号输入框 -->
						<view class="titleTxt margin30">
							注册账号
						</view>
						<view class="inpukang margin20 ">
							<input v-model="userInfo.phone" placeholder="请输入手机号码" placeholder-class="inputPlaceholder"
								class="inputTxt" type="text" />
						</view>
						<!-- 密码输入框 -->
						<view class="titleTxt margin30">
							账号密码
						</view>
						<view class="inpukang margin20 ">
							<input v-model="userInfo.password" placeholder="请输入密码" placeholder-class="inputPlaceholder"
								class="inputTxt" type="password" />
						</view>
						<!-- 验证码输入框 -->
						<view class="titleTxt margin30">
							验证码
						</view>
						<view class="inpukang margin20 flex_b">
							<input v-model="userInfo.code" placeholder="请输入验证码" placeholder-class="inputPlaceholder"
								class="inputTxt" type="text" />
							<!-- 获取验证码按钮 -->
							<view class="yanBoder" @click="huoquCode" :class="['yanBoder', { 'disabled': codeShow }]">
								{{yanCode}}
							</view>
						</view>
						<!-- 注册按钮 -->
						<button :class="['quanBut', 'titleTxt', 'margin30', { 'disabled': loginShow }]"
							:disabled="loginShow" @click="userregister">
							<!-- 加载动画 -->
							<view v-if="loginShow" class="loading-container">
								<uv-loading-icon size="36rpx" textColor='#fff' mode="circle"
									text="注册中"></uv-loading-icon>
							</view>
							<!-- 默认按钮文本 -->
							<view v-else>
								注册
							</view>
						</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCode, appRegister, loginUser, getInfo,allupload } from '@/utils/api/login.js'; 
export default {
  data() {
    return {
      // 获取验证码按钮的文本
      yanCode: '获取验证码',
      // 用户信息表单数据
      userInfo: {
        inviteCode: '', // 邀请码（选填）
        phone: '',      // 手机号
        password: '',   // 密码
        code: ''        // 验证码
      },
      // 倒计时初始值
      countdown: 60,
      // 控制注册按钮是否显示加载状态
      loginShow: false,
      // 控制获取验证码按钮是否禁用
      codeShow: false
    };
  },
  methods: {
    // 用户注册方法
    userregister() {
      this.loginShow = true; // 开启注册按钮的加载状态

      // 检查密码长度
      if (this.userInfo.password.length < 5) {
        uni.showToast({
          icon: 'none',
          title: '请输入5~20个字符作为密码！',
          duration: 2000
        });
        this.loginShow = false; // 关闭加载状态
        return;
      }

      // 检查手机号码格式
      if (!this.$validatePhoneNumber(this.userInfo.phone)) {
        uni.showToast({
          icon: 'none',
          title: '手机号码格式不正确！',
          duration: 2000
        });
        this.loginShow = false; // 关闭加载状态
        return;
      }

      // 检查验证码
      if (!this.userInfo.code) {
        uni.showToast({
          icon: 'none',
          title: '请填写验证码！',
          duration: 2000
        });
        this.loginShow = false; // 关闭加载状态
        return;
      }

      // 发送注册请求
      this.$api.appRegister(this.userInfo).then(res => {
        if (res.code === 200) {
          // 注册成功，跳转到登录页面
          uni.reLaunch({
            url: '/pages/login/login'
          });
        } else {
          // 注册失败，显示错误提示
          uni.showToast({
            icon: 'none',
            title: '注册失败，请重试！',
            duration: 2000
          });
        }
        this.loginShow = false; // 关闭加载状态
      }).catch(error => {
        // 请求出错，显示错误提示
        uni.showToast({
          icon: 'none',
          title: '网络错误，请稍后重试！',
          duration: 2000
        });
        this.loginShow = false; // 关闭加载状态
      });
    },

    // 获取验证码方法
    async huoquCode() {
      // 验证手机号格式
        if (this.countdown === 60) { // 仅当倒计时为 60 时才执行
          this.codeShow = true; // 禁用获取验证码按钮
          this.$api.getCode(this.userInfo.phone, 'register').then(res => {
            if (res.code === 200) {
              // 获取验证码成功，启动倒计时
              this.startCountdown();
            } else {
              // 获取验证码失败，显示错误提示
              uni.showToast({
                title: '获取验证码失败',
                icon: 'none'
              });
            }
          }).catch(error => {
            // 请求出错，显示错误提示
            uni.showToast({
              title: '网络错误，请稍后重试！',
              icon: 'none'
            });
          });
        }	
    },

    // 启动倒计时方法
    startCountdown() {
      this.yanCode = `${this.countdown}s后重新获取`; // 更新按钮文本
      this.timer = setInterval(() => {
        this.countdown--; // 减少倒计时
        this.yanCode = `${this.countdown}s后重新获取`; // 更新按钮文本

        if (this.countdown <= 0) {
          clearInterval(this.timer); // 清除定时器
          this.countdown = 60; // 重置倒计时
          this.yanCode = '获取验证码'; // 重置按钮文本
          this.codeShow = false; // 解禁获取验证码按钮
        }
      }, 1000);
    }
  }
};
</script>

<style scoped lang="scss">
	// 登录区域的内边距
	.loginPading {
		padding: 250rpx 30rpx 0 30rpx;
		color: #fff;

		// 输入框和按钮的外边距
		.kuangPading {
			margin-top: 61rpx;

			// 加载动画的容器
			.loading-container {
				margin-top: 26rpx;
			}
		}
	}
	page{
		background: #171731;
	}
</style>